<template>
  <el-card class="box-card">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="mar-top">
      <el-col>
        <el-input class="input-search" v-model="query"  placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button type="success">添加用户</el-button>
      </el-col>
    </el-row>
    <el-table class="mar-top" height="395" style="width: 100%;" :data="tableData">
      <el-table-column label="日期" width="140">
        <!--日期格式化-->
        <template slot-scope="tableData">
          {{tableData.row.date | fmtdate}}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </el-card>

</template>

<script>
    export default {
      data() {
        return {
          query:'',
          tableData: [{
            date: '1537243783',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '1537243783',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
          userlist:[],
          total:0,
          pagenum:1,
          pagesize:2
        }
      },
      created(){
        this.getUserList();
      },
      methods:{
      async getUserList(){
          //获取请求头
          const AUTH_TOKEN = localStorage.getItem('token')
          this.$http.defaults.headers.common['Authorization'] = AUTH_TOKEN;
          this.$http.get('users?query=${this.query}&pagenum=${this.pagenum}&pagesize=${this.pagesize}')

          const {meta:{status,msg},data:{users,total}} = res.data

          if(status===200){
            this.userlist = users
            this.total = total
          }
        }
      }

    }
</script>

<style lang="less" scoped>
  .box-card{
    height:100%;
    box-sizing: border-box;

    .input-search{
      width: 300px;
    }
  }

</style>
